import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Layout, Menu, Icon} from "antd";
import {observer, inject} from "mobx-react";

const {SubMenu} = Menu;
const {Sider} = Layout;

@inject("store")
@observer
class SiderBar extends Component {
  getMenuNodes = MenuList => {
    return MenuList.map(item => {
      if (!item.children) {
        return (
          <Menu.Item key={item.path}>
            <Link to={item.path}>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu
            key={item.path}
            title={
              <span>
                <Icon type={item.icon} />
                <span>{item.title}</span>
              </span>
            }
          >
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };

  onOpenChange = key => {
    this.props.store.common.setSubKey(key);
    // console.log("onOpenChange", key);
  };
  render() {
    const data = [
      {
        title: "首页",
        icon: "home",
        path: "home"
      },
      {
        title: "商品",
        icon: "home",
        path: "sub1",
        children: [
          {
            title: "case",
            icon: "home",
            path: "case"
          },
          {
            title: "about",
            icon: "home",
            path: "about"
          }
        ]
      },
      {
        title: "图形图标",
        icon: "home",
        path: "sub2",
        children: [
          {
            title: "pie",
            icon: "home",
            path: "pie"
          },
          {
            title: "line",
            icon: "home",
            path: "line"
          }
        ]
      }
    ];
    const path = this.props.location.pathname;
    const {
      store: {common}
    } = this.props;
    console.log("path", path);
    return (
      <Sider width={200} style={{background: "#fff"}}>
        <Menu
          mode="inline"
          onOpenChange={this.onOpenChange}
          defaultSelectedKeys={["case"]}
          openKeys={common.subKey}
          selectedKeys={[path.substr(1, path.length)]}
          style={{height: "100%", borderRight: 0}}
        >
          {this.getMenuNodes(data)}
        </Menu>
      </Sider>
    );
  }
}

export default SiderBar;
